/**
 * 初始化整体流量图标
 */
define(function () {
        var ec=require('echarts');
        require('echarts/chart/line');
        require('echarts/chart/bar');
        require('echarts/chart/pie'); 
        require('echarts/chart/funnel');
        
        var ecConfig = require('echarts/config');
        var zrnumber = require('echarts/util/number');
        var myChart_pie = ec.init(document.getElementById('source_pie'));
        var myChart_line = ec.init(document.getElementById('source_line'));

        var option_pie = {
            title : {
                text: '分来源--精准收入',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['站内','站外免费','站外付费']
            },
            toolbox: {
                show : true,
                orient:'vertical',
                y:'bottom',
                feature : {
                    mark : {show: false},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true, 
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };

        var option_line = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            toolbox: {
                show : true,
                orient:'vertical',
                y:'bottom',
                feature : {
                    mark : {show: false},
                    dataZoom : {show: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                x: 60,
                x2:40
            },                    
            calculable : true,
            xAxis: [{
                type: "category",
                boundaryGap: true,
                data : ['周一','周二','周三','周四','周五','周六','周日'],
                axisLabel:{formatter:function(value){
                    return value;
                }}
            }],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'邮件营销',
                    type: 'line',
                    smooth: true,
                    symbol:"none",
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type: 'line',
                    smooth: true,
                    symbol:"none",
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type: 'line',
                    smooth: true,
                    symbol:"none",
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type: 'line',
                    smooth: true,
                    symbol:"none",
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type: 'line',
                    smooth: true,
                    symbol:"none",
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
                            



        // myChart_pie.on(ecConfig.EVENT.PIE_SELECTED, function (param){
        //     var selected = param.selected;
        //     var serie;
        //     var str = '当前选择： ';
        //     for (var idx in selected) {
        //         if(idx != 0)
        //             continue;
        //     }
        // });
        // show_pie(businessName);
        // myChart_pie.setOption(option_pie,true);
        // myChart_line.setOption(option_line,true);
        // myChart_pie.connect(myChart_line);
        // myChart_line.connect(myChart_pie);


       /**
         * 根据指标显示日数据
         * @param index
         */
        function show_pie(businessName){
            var beginDate = $('#beginDate_pcSrc').val();
            var endDate = $('#endDate_pcSrc').val();
            myChart_pie.showLoading({
                text: '正在努力的读取数据中...'
            });
            $.ajax({
                url: '/dashboard/income/ajax/netflow/sourcePie',
                type: 'post',
                async: true,
                data:{"businessName":businessName,"platform":$('#platform').val(),"beginDate":beginDate,"endDate":endDate},
                dataType: 'json',
                success: function(data, textStatus) {
                    option_pie.legend.data = data.sourceNameList;                 
                    option_pie.series[0].data = data.dataList;                           
                    myChart_pie.setOption(option_pie,true);
                    myChart_pie.hideLoading();
                    show_line(businessName,2);
                },
                error : function() {
                    myChart_pie.hideLoading();
                }
            });
        }

        // 堆积显示的指标
        var stackLine=['cash', 'pv', 'adpv', 'disp', 'click'];   
        /**
         * 根据指标显示日数据
         * @param eventType= 2:第一次加载, 1:切换日，周，月刷新 , 0: 添加对比后又重新选择指标
         */
        function show_line(businessName,eventType){
            var dateGrp = $('#pcSrc_option').attr('dateGrp'); //stat_date, month_num,week_begin
            var statType = $('#pcSrc_option').attr('statType');//day, week, month
            var sources  = option_pie.legend.data.join("','");
            var index = $('#index_pcSrc').val();
            myChart_line.showLoading({ text: '正在努力的读取数据中...' });
            $.ajax({
                url: '/dashboard/income/ajax/netflow/sourceLine',
                type: 'post',
                async: true,
                data:{"dateGroup":dateGrp,"statType":statType,"businessName":businessName,"platform":$('#platform').val(),"index":index,"sources":sources, "dataType":"chart"},
                dataType: 'json',
                success: function(data, textStatus) {
                    //X轴时间
                    option_line.xAxis[0].data = data.time;
                    option_line.legend.data = option_pie.legend.data;
                    //上图每条曲线
                    var series_local = [];
                    $.each(option_pie.legend.data,function(i, src){
                        series_local[i] = {
                            name: src,
                            type: 'line',
                            smooth: true,
                            symbol:'none',
                            'data': data[src]
                        };
                        //堆积指标
                        if($.inArray(index, stackLine) != -1){
                            series_local[i].stack='总量';
                            series_local[i].itemStyle={normal: {areaStyle: {type: 'default'}}};
                        }
                    });

                    option_line.tooltip.formatter=tooltipFunc;
                    //数据
                    option_line.series = series_local;

                    //区域缩放
                    var datezoom_local={
                        stat_date:{start:(1-31/data.time.length)*100,end:100},
                        week_begin:{start:(1-12/data.time.length)*100,end:100},
                        month_num:{start:0,end:100},
                    };
                    //少于31个点，全显
                    if(data.time.length<31){
                        datezoom_local={
                            stat_date:{start:0,end:100},
                            week_begin:{start:0,end:100},
                            month_num:{start:0,end:100},
                        };
                    }

                    if(eventType == 1 || eventType == 2){
                        if('stat_date'==dateGrp || 'week_begin'==dateGrp){      
                            option_line.xAxis[0].axisLabel.formatter=function(value){ return value; } ;
                        }else if('month_num'==dateGrp){
                            option_line.xAxis[0].axisLabel.formatter=function(value){ return value.substr(0,4)+"年"+value.substr(4,2)+"月"; } ;
                        }
                       
                        if(eventType == 1 && myChart_line.component.dataZoom){
                            option_line.dataZoom=datezoom_local[dateGrp];
                            myChart_line.component.dataZoom.absoluteZoom(datezoom_local[dateGrp]);
                            option_line.dataZoom.show=true;
                        }else if(eventType == 2){
                            option_line.dataZoom=datezoom_local[dateGrp];
                            option_line.dataZoom.show=!$('#time_checkbox_pcSrc').is(":checked");
                        }
                        myChart_line.setOption(option_line,true);
                        myChart_pie.connect(myChart_line);
                        myChart_line.connect(myChart_pie);
                    }else if(eventType == 0){
                        myChart_line.component.dataZoom=compDataZoom_old;
                        myChart_line.setOption(option_line,true);
                        if($('#time_input_pcSrc').val()){
                            EC.addCompare($('#time_input_pcSrc').val());
                        }
                    }
                    // myChart_line.clear();
                    myChart_line.hideLoading();
                },
                error : function() {
                    myChart_line.hideLoading();
                }
            });
        }
     

        //鼠标click事件
        function eventClick(param){
            var click_date = '2015-01-01';
            if (typeof param.seriesIndex != 'undefined') {
                click_date = param.name;
            }else{
                return;
            }
            loadTableData(click_date);
        }
        myChart_line.on(ecConfig.EVENT.CLICK, eventClick);

        //加载PC,M,APP数据，, 0:字符, 1:数字, 2:百分比
        var show_cols = {"source":0, "cash":1,"cash_chain":2,"pv":1,"pv_chain":2,"pvr":3,"pvr_chain":2,
        "disp":1,"disp_chain":2,"click":1,"click_chain":2,"asn":1,"asn_chain":2,"acp":1,"acp_chain":2,"ctr2":3,"ctr2_chain":2,"realization_rate":3,"realization_rate_chain":2};
        function loadTableData(stat_date){
            var dateGrp = $('#pcSrc_option').attr('dateGrp'); //stat_date, month_num,week_begin
            var statType = $('#pcSrc_option').attr('statType');//day, week, month
            var sources  = option_pie.legend.data.join("','");
            var index = $('#index_pcSrc').val();
            $.ajax({
                url: '/dashboard/income/ajax/netflow/sourceLine',
                type: 'post',
                async: true,
                data:{"dateGroup":dateGrp,"statType":statType,"businessName":businessName,"platform":$('#platform').val(),"dateVal":stat_date,"sources":sources, "dataType":"table"},
                dataType: 'json',
                success: function(data, textStatus) {
                    var resultList = data.dataList;
                    var htmlRows = "";
                    $.each(resultList,function(i,vo){
                        htmlRows += "<tr>";

                        $.each(show_cols,function(col,colType){
                            switch(colType){
                                case 0:
                                    htmlRows += "<td>";
                                    htmlRows += vo[col];
                                    htmlRows += "</td>";
                                    break;
                                case 1:
                                    htmlRows += "<td>";
                                    htmlRows += zrnumber.addCommas(vo[col]);
                                    htmlRows += "</td>";
                                    break;
                                case 2:
                                    htmlRows += getRate(vo[col]);
                                    break;
                                case 3:
                                    htmlRows += "<td>";
                                    htmlRows += parseFloat(vo[col]).toFixed(2)+"%";
                                    htmlRows += "</td>";
                                    break;                                       
                            }
                        });

                        htmlRows += "</tr>";
                    });

                    $('#pcSrcTable tr:gt(0)').remove();
                    $('#pcSrcTable_date').text(stat_date.replace(/\-/g,"."));
                    $('#pcSrcTable').append(htmlRows);
                },
                error : function() {

                }
            }); 
        }

        // function tooltipFunc_1(params, ticket, callback){
        //     return tooltipFunc(params, ticket, callback,0);
        // }
        // function tooltipFunc_2(params, ticket, callback){
        //     return tooltipFunc(params, ticket, callback,1);
        // }
        //提示框
        function  tooltipFunc(params, ticket, callback){
            var dateVal = formatShowDate(params[0].name);
            var curOption = option_line;
            var index_current=getIndexByName(curOption.xAxis[0].data,params[0].name);

            var result='<table class="table-center">';
            result+='<tr><td>'+dateVal+'</td><td>';
            var isStatDay = isDay(); 
            if(isStatDay)
                result += getWeekDay(dateVal);
            result += '</td>';
            if(isStatDay)
                result +="<td>日环比</td>";
            else if(isWeek())
                result += "<td>周环比</td>";
             else if(isMonth())
                result += "<td>月环比</td>";
            result += '</tr>';


            $(params).each(function(index,para){
                result+='<tr><td>'+para.seriesName+'</td><td>'+zrnumber.addCommas(para.data)+'</td>';
                var seriesIndex = para.seriesIndex;
                var day_td="<td>--</td>";
                //日周月 环比(前一日周月)
                if(index_current-1>=0){
                    var data_yesday = null;
                    data_yesday= curOption.series[seriesIndex].data[index_current-1];                
                    
                    if(data_yesday != null){
                        var s=(((para.data/data_yesday)-1)*100).toFixed(2);
                        if(s>0){
                            day_td='<td style="color: orangered;">'+s+'%&#8593</td>';
                        }else{
                            day_td='<td style="color: greenyellow;">'+s+'%&#8595</td>';
                        }
                    }
                }
                result += day_td;
                //周同比(日)
                // if(isStatDay){
                //     var week_td='<td>--</td>';
                //     if(index_current-7>=0){
                //         data_week= curOption.series[seriesIndex].data[index_current-7];
                //         var s=(((para.data/data_week)-1)*100).toFixed(2);
                //         if(s>0){
                //             week_td='<td style="color: orangered;">'+s+'%&#8593</td>';
                //         }else{
                //             week_td='<td style="color: greenyellow;">'+s+'%&#8595</td>';
                //         }
                //     }
                //     result += week_td;
                // }
                result += '</tr>';
            });
            result+='</table>';
            return result;
        }           

       function formatShowDate(yyyymmdd){
            var dateGrp = $('#pcSrc_option').attr('dateGrp');
            if('stat_date'==dateGrp){
                return yyyymmdd;
            }else if('week_begin'==dateGrp){
                return yyyymmdd;
            }else if('month_num'==dateGrp){
                return yyyymmdd.substr(0,4)+"年"+yyyymmdd.substr(4,2)+"月";
            }
        }

        function isDay(){
            var dateGrp = $('#pcSrc_option').attr('dateGrp');
            if('stat_date'==dateGrp){
                return true;
            }
            return false;
        }

        function isWeek(){
             var dateGrp = $('#pcSrc_option').attr('dateGrp');
            if('week_begin'==dateGrp){
                return true;
            }
            return false;
        }

        function isMonth(){
            var dateGrp = $('#pcSrc_option').attr('dateGrp');
            if('month_num'==dateGrp){
                return true;
            }
            return false;
        }

        var zrUtil = require('zrender/tool/util');
        // console.log(zrUtil);

        function getShowDays(){
            return compDataZoom_old.option.xAxis[0].data;
        }
        
        function addCompare(time){
            time=formatTime(time);
            var copy=zrUtil.clone(option_line);
            copy.toolbox.feature.magicType.show=false;
            copy.toolbox.feature.dataZoom.show=false;
            var index_time=getIndexByName(option_line.xAxis[0].data,time);
            var index_show=getIndexByName(option_line.xAxis[0].data,getShowDays()[0]);
            var length=getShowDays().length;
            setCompareXaxis(copy,index_time,index_show,length);
            var index=0;
            //选中对比时，再次选择指标，需要记忆图例的选择状态
            $.each(legend_SelectedMap,function(key,value){
                //判断是否在当前图例值中，应为echarts会把"对比时间段"也放入SelectedMap
                if($.inArray(key,option_line.legend.data) != -1){
                    if(value){
                        return false;
                    }
                    index++;
                }     
            });
            
            if(index<option_line.legend.data.length){
                setCompareSeries(copy,index,index_time,index_show,length);
                setCompareLegend(copy);
                setCompareTooltip(copy);
                delete copy.dataZoom;
                myChart_line.restore();
                myChart_line.setOption(copy,true);
            }

        }

        function setCompareLegend(copy){
            copy.legend= {
                data:[copy.series[0].name, copy.series[1].name],
                selectedMode:false
            }
        }

        var compDataZoom_old;
        var legend_SelectedMap={};  //需要记忆图例的选择状态
        function hideDataZoom(){
            legend_SelectedMap=myChart_line.component.legend.getSelectedMap();
            compDataZoom_old=myChart_line.component.dataZoom;    //记忆缩放
            option_line.dataZoom.show=false;
            myChart_line.setOption(option_line,false);
        }

        function removeCompare(){
            //恢复缩放
            myChart_line.component.dataZoom=compDataZoom_old;
            option_line.dataZoom.show=true;
            //去掉对比时恢复图例的选择状态
            $.each(legend_SelectedMap,function(key,value){
                if($.inArray(key,option_line.legend.data) != -1){
                    myChart_line.component.legend.setSelected(key,value);
                }else{
                    myChart_line.component.legend.setSelected(key,false);
                }
            });
            myChart_line.setOption(option_line,true);
        }


        function setCompareTooltip(copy){
            copy.series[1]&&copy.series[1].tooltip&&(copy.series[1].tooltip={show:false});
            copy.series[2]&&copy.series[2].tooltip&&(copy.series[2].tooltip={show:false});
            copy.series[3]&&copy.series[3].tooltip&&(copy.series[3].tooltip={show:false});

            copy.tooltip.formatter=function(params, ticket, callback){
                var date_current=params[0][1];
                var data_current=params[0][2];
                var index_current=getIndexByName(copy.xAxis[0].data,date_current);
                
                var dateVal = formatShowDate(date_current);
                var result='<table class="table-center">' +
                    '<tr><td>'+dateVal;
                //是日要显示周几
                if(isDay())
                     result += ' ('+getWeekDay(dateVal)+')';
                result += '</td><td>'+zrnumber.addCommas(data_current)+'</td></tr>';
                if(copy.series[1]){
                    var data_compare=copy.series[1].data[index_current];
                    var s=(((data_current-data_compare)/data_compare)*100).toFixed(2);
                    dateVal = formatShowDate(copy.xAxis[1].data[index_current]);
                    result+='<tr><td>'+dateVal;
                    if(isDay())
                        result += ' ('+getWeekDay(dateVal)+')';
                    result += '</td><td>'+zrnumber.addCommas(data_compare)+'</td></tr>';
                    if(s>0){
                        result+='<tr><td>变化</td><td style="color: orangered">'+s+'%&#8593</td></tr>';
                    }else{
                        result+='<tr><td>变化</td><td style="color: greenyellow">'+s+'%&#8595</td></tr>';
                    }
                }
                result+='</table>';
                return   result;
            }
        }

        function  setCompareSeries(copy,index,index_time,index_show,length){
            copy.series=[];
            //原来数据
            copy.series.push(zrUtil.clone(option_line.series[index]));
            copy.series[0].type='line';
            copy.series[0].data=option_line.series[index].data.slice(index_show,index_show+length);
            delete  copy.series[0].stack;
            delete  copy.series[0].itemStyle;
            //对比数据
            copy.series.push(zrUtil.clone(option_line.series[index]));
            copy.series[1].type='line';
            copy.series[1].name="对比时间段";
            copy.series[1].xAxisIndex=1;
            delete  copy.series[1].stack;
            delete  copy.series[1].itemStyle;

            copy.series[1].data=option_line.series[index].data.slice(index_time,index_time+length);
            if(length>31){return}
            //对比柱
            copy.series.push({
                tooltip:{show:false},
                show:false,
                name: '对比时间段1',
                type: 'bar',
                stack: '1',
                barWidth:3,
                xAxisIndex:1,
                itemStyle:{
                    normal:{
                        color:'rgba(0,0,0,0)'
                    },
                    emphasis:{
                        color:'rgba(0,0,0,0)'
                    }
                },
                data: function(){
                    var i=0;
                    return $.map(copy.series[1].data,function(val){
                        var tt=copy.series[0].data[i++];
                        if(val<tt){
                            return val;
                        }else{
                            return tt;
                        }
                    })
                }()
            });
            copy.series.push({
                tooltip:{show:false},
                name: '变化',
                type: 'bar',
                stack: '1',
                xAxisIndex:1,
                data: function(){
                    var i=0;
                    return $.map(copy.series[1].data,function(val){
                        var tt=copy.series[0].data[i++];
                        if(val<tt){
                            return tt-val;
                        }else{
                            return {value : val-tt, itemStyle:{ normal:{color:'red'}}};
                            //return val-tt;
                        }
                    })
                }()
            });
        }

        function setCompareXaxis(copy,index_time,index_show,length){
            copy.xAxis=[];
            copy.xAxis.push(zrUtil.clone(option_line.xAxis[0]));
            copy.xAxis.push(zrUtil.clone(option_line.xAxis[0]));
            copy.xAxis[0].data=option_line.xAxis[0].data.slice(index_show,index_show+length);
            copy.xAxis[1].data=option_line.xAxis[0].data.slice(index_time,index_time+length);
        }
        function getIndexByName(data,name) {
            var dataLength = data.length;
            for (var i = 0; i < dataLength; i++) {
                if (data[i] == name || typeof data[i].value != 'undefined' && data[i].value == name) {
                    return i;
                }
            }
            return -1;
        }

        function formatTime(time){
            return time;
        }

        function getAllDays(){
            return option_line.xAxis.data||option_line.xAxis[0].data;
        }

        // 时间勾选框事件
        $('#time_checkbox_pcSrc').change(function(e){
            var input=$('#time_input_pcSrc');
            if(!input)return;
            if($(this).is(":checked")){
                input.removeAttr('disabled');
                input.attr('placeholder','选择时间起点');               
                EC.hideDataZoom();
                setDatePicker(EC, $('#pcSrc_option').attr('dateGrp'),input);
            }else{
                input.val('');
                input.attr('disabled','');
                input.attr('placeholder','添加对比');               
                EC.removeCompare();
            }
        });
       
        //绑定chenge事件
        $("#index_pcSrc").change(function(){
            var type = 2;
            if($('#time_checkbox_pcSrc').is(":checked"))
                type=0;        
            show_line(businessName,type);
        });

        //日周月
        $(":button.btnPcSrc[dateGrp]").click(function(){
            changeDateGrp(this);
            $('#time_checkbox_pcSrc').attr('checked',false);
            $('#time_input_pcSrc').val('');
            $('#time_input_pcSrc').attr('disabled','');
            if($(this).attr('dateGrp')=='week_begin'){
                $('#time_input_pcSrc').parent().css('visibility',"hidden");
            }else{
                $('#time_input_pcSrc').parent().css('visibility',"visible");
            }
            
            show_line(businessName,1);
        });

        //3起始时间选择事件
        $('#beginDate_pcSrc').datepicker(datepicker_op);
        $('#endDate_pcSrc').datepicker(datepicker_op);
        $('#beginDate_pcSrc').datepicker().on('changeDate', function (e) {
            $('#endDate_pcSrc').datepicker('setStartDate', e.date);
        });

        $('#endDate_pcSrc').datepicker().on ('changeDate', function (e) {
            $('#beginDate_pcSrc').datepicker ('setEndDate', e.date);
        });

        $("#refresh_pcSrc_pie_btn").click(function(){
            show_pie(businessName);
        });

        //对比时间选择事件
        $('#time_input_pcSrc').datepicker().on('changeDate',function(e){
            EC.addCompare(e.format());
        });
        var EC={
            show:show_pie,
            resize:function(){myChart_pie.resize();myChart_line.resize();},
            hideDataZoom:hideDataZoom,
            removeCompare:removeCompare,
            getShowDays:getShowDays,
            getAllDays:getAllDays,
            addCompare:addCompare
        };

        // EC.show(businessName);
        return EC;
    }        
);
